import React, {useEffect, useRef, Suspense} from 'react';
import MyFloatButton from "../../component/MyFloatButton/MyFloatButton";
import FrontHeader from "../../component/FrontHeader/FrontHeader";
import style from './HomePage.module.scss'
import {Outlet} from "react-router-dom";
import MyIntroduction from "../../component/MyIntroduction/MyIntroduction";
import {getDataStatistic} from "../../api/publicApi";
import PageLoading from "../../component/PageLoading/PageLoading";

// 首页
function HomePage() {
    const VIewRef = useRef()
    useEffect(() => {
        getDataStatistic()
    }, [])

    return (
        <div className={style.HomePage} ref={VIewRef}>
            <div style={{zIndex: 999}}>
                {/*内容部分*/}
                <div className={style.HomePageText}>
                    {/* 导航条 */}
                    <div className={style.HomePageTextHeader}>
                        <div><FrontHeader></FrontHeader></div>
                    </div>
                    {/*页面切换区*/}
                    <div className={style.HomePageTextOutlet}>
                        <Suspense fallback={<PageLoading></PageLoading>}>
                            <Outlet/>
                        </Suspense>

                    </div>
                    {/*备案号*/}
                    <MyIntroduction></MyIntroduction>
                    {/* 悬浮按钮 */}
                    <div>
                        <MyFloatButton></MyFloatButton>
                    </div>
                </div>
            </div>
        </div>
    );
}


export default HomePage;
